<template>
  <div class="sp-layout__header">
    <div class="sp-layout__header-top">
      <h3 class="sp-layout__header-logo">空铁管家CRM管理系统</h3>
      <div class="sp-layout__header-link">
        <span @click="logOut">{{user.adminName}}</span>
        <span v-if="is" @click="dialogFormVisible = true">登录</span>
        <span v-else @click="cancelOtherPlugin()">登出</span>
      </div>
    </div>
    <!-- menu -->
    <div class="sp-layout__header-menu">
      <span
        v-for="(item, index) in tabcurList"
        :key="index"
        :class="{ 'active': tabcurid == item.id }"
        @click="tabcur(item.id)"
      >
        {{ item.name }}
      </span>
    </div>
    <!-- 跑马灯 -->
    <SHint :text="textName" />
    <!-- dialog -->
    <el-dialog title="华云外呼登录" :visible.sync="dialogFormVisible" width="500px"  :append-to-body="true" :close-on-click-modal="false">
      <el-form :model="form" label-position="left" :rules="rules" ref="ruleForm">
        <el-form-item label="网址:" :label-width="formLabelWidth" prop="httpServerAddress">
          <el-input v-model="form.httpServerAddress" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="账号:" :label-width="formLabelWidth" prop="agentID">
          <el-input v-model="form.agentID" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码:" :label-width="formLabelWidth" prop="password">
          <el-input v-model="form.password" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="分机号:" :label-width="formLabelWidth" prop="sipUser">
          <el-input v-model="form.sipUser" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="startOtherPlugin('ruleForm')">登录</el-button>
      </div>
    </el-dialog>
    <el-dialog title="员工信息" :close-on-click-modal="false" :append-to-body="true" :visible.sync="logOutDialog" width="42%" :before-close="handleClose">
      <el-form :model="user" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名">
          <el-input type="text" v-model="user.adminName" disabled></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input type="text" v-model="user.adminPhone" disabled></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input type="text" v-model="user.adminNumber" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button @click="logOutDialog=false">取消</el-button>
        <el-button @click="putPass">修改密码</el-button>
        <el-button type="primary" @click="loginOut">退出登录</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="editPassDialog" width="42%" :append-to-body="true"  :close-on-click-modal="false" :before-close="canceleditPassDialog">
      <el-form :model="editPass" :rules="editPassed" label-width="125px" ref="editPass" class="demo-ruleForm">
        <el-form-item label="原密码" prop="oldPwd">
          <el-input type="password" v-model="editPass.oldPwd"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwdOne">
          <el-input type="password" v-model="editPass.newPwdOne" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="请再次输入密码" prop="newPwdTwo">
          <el-input type="password" v-model="editPass.newPwdTwo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button  type="primary" @click="submitEditPass('editPass')">确认修改</el-button>
          <el-button @click="editPassDialog = false">取消修改</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">

      </span>
    </el-dialog>
  </div>
</template>

<script>
  import cookie from "js-cookie";
  import bus from "../common/bus.js";
  import SHint from "../components/sHint.vue";
  export default {
    name: "Menu",
    components: {
      SHint
    },
    data() {
      const pwdCheck = async (rule, value, callback) => {
        if (value.length < 6) {
          return callback(new Error('密码不能少于6位！'));
        } else if (value.length > 16) {
          return callback(new Error('密码最长不能超过16位！'));
        } else {
          callback()
        }
      }
      // 重复密码验证
      const pwdAgainCheck = async (rule, value, callback) => {
        if (value.length < 1) {
          return callback(new Error('重复密码不能为空！'));
        } else if (this.editPass.newPwdOne != this.editPass.newPwdTwo) {
          return callback(new Error('两次输入密码不一致！'));
        } else {
          callback()
        }
      };
      return {
        // 跑马灯
        textName: '',
        formLabelWidth: "70px",
        dialogFormVisible: false,
        is: sessionStorage.getItem("from") == 1 ? false : true,
        tabcurid: sessionStorage.getItem("menu"),
        tabcurList: [{
            id: 0,
            name: "首页",
          },
          {
            id: "system",
            name: "系统",
          },
          {
            id: "customer",
            name: "会员管理",
          },
          {
            id: "finance",
            name: "财务",
          },
          {
            id: "vipHall",
            name: "贵宾厅/餐厅",
          },
          {
            id: "insurance",
            name: "保险",
          },
          {
            id: "flight",
            name: "机票",
          },
          {
            id: "train",
            name: "火车票",
          },
          {
            id: "hotel",
            name: "酒店",
          },
          // {
          //   id: "specialCar",
          //   name: "专车",
          // },
          // {
          //   id: "mall",
          //   name: "商城",
          // },
          // {
          //   id: "travel",
          //   name: "旅游",
          // },
          // {
          //   id: "parking",
          //   name: "代泊车", 
          // },
          // {
          //   id: "ticket",
          //   name: "门票",
          // },
         
          // {
          //   id: "DDDriving",
          //   name: "滴滴代驾",
          // },

        ],
        msg: "",
        form: {
          httpServerAddress: "http://v4.aiccyun.com/",
          agentID: "8001",
          entId: "JSSJ",
          password: "!dfDgF45353..",
          sipUser: "50001",
          TerminalType: "5",
          positionX: "20",
          positionY: "180",
          alertScreen: function (obj) {
            console.log("接听来电的回调-----请在这里写来电弹屏页面", obj);
          },
        },
        rules: {
          httpServerAddress: [{
            required: true,
            message: "请输入账号",
            trigger: "blur"
          }, ],
          agentID: [{
            required: true,
            message: "请输入账号",
            trigger: "blur"
          }],
          password: [{
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }],
          sipUser: [{
            required: true,
            message: "请输入分机号",
            trigger: "blur"
          }],
        },
        // 员工信息
        user: {},
        logOutDialog: false,
        // 修改密码弹窗
        editPassDialog: false,
        editPass: {
          oldPwd: '',
          newPwdOne: '',
          newPwdTwo: '',
        },
        editPassed: {
          oldPwd: [{
            required: true,
            message: '请输入原密码',
            trigger: 'change'
          }],
          newPwdOne: [{
            required: true,
            validator: pwdCheck,
            trigger: 'change'
          }],
          newPwdTwo: [{
            required: true,
            validator: pwdAgainCheck,
            trigger: 'change'
          }],
        }
      }
    },
    created() {
      // window.open(`./phone.html`)
      this.tabcur(this.tabcurid);
      // bus.$on("menu", (msg) => {
      // console.log('接收接收接收',msg)
      // // )}     
    },
    methods: {
      // 跑马灯接口
      // getshow() {
      //   this.$axios.getshow().then((res) => {
      //     // console.log(res)
      //     this.textName = res.msg
      //   })
      // },
      cancelOtherPlugin() {
        window.sessionStorage.setItem("from", 0);
        this.is = true;
      },
      // 华云登录
      startOtherPlugin(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // window.phoneUserInfo = this.form;
            window.sessionStorage.setItem(
              "phoneUserInfo",
              JSON.stringify(this.form)
            );
            window.sessionStorage.setItem("from", 1);
            this.dialogFormVisible = false;
            this.is = false;
            // console.log(window)
            window.phone.defineEvent('btn_login');
          } else {
            return false;
          }
        });
      },

      // 菜单切换id
      tabcur(index) {
        let menuInfo = JSON.parse(localStorage.getItem('employeesInformation')).menuInfo
        this.tabcurid = index;
        let arr = []
        sessionStorage.setItem("menu", index); //保存用户ID'
        for (let i = 0; i < menuInfo.length; i++) {
            if (menuInfo[i].menuModel ==index) {
              arr.push(menuInfo[i])
            }else{
            }
        }
        // console.log(arr)
            bus.$emit("menu", arr);
            sessionStorage.setItem("me_u", JSON.stringify(arr)); //保存用户ID
     
      },
      // 获取员工登录信息
      users() {
        this.user = JSON.parse(localStorage.getItem('employeesInformation')).userInfo
      },
      // 退出弹窗显示
      logOut() {
        this.logOutDialog = true
      },
      handleClose() {
        this.logOutDialog = false
      },
      // 退出登录
      loginOut() {
        this.$axios.getlogOut({
        }).then((res)=>{
          if (res.code =="00000") {
            localStorage.removeItem("Xd_Token");
            cookie.remove('Xd_Token')
            this.$router.go(0)
          }
        })
      },
      // 修改密码弹窗显示
      putPass() {
        this.logOutDialog = false
        this.editPassDialog = true
      },
      // 关闭修改密码弹窗
      canceleditPassDialog() {
        this.editPassDialog = false
      },
      // 提交修改密码
      submitEditPass(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.getupdatePassword()
          } else {
            // return false;
          }
        });
      },
      // 修改密码接口
      getupdatePassword() {
        localStorage.setItem("isToken", true);
        this.$axios.getupdatePassword({
          oldPwd: this.editPass.oldPwd,
          newPwdOne: this.editPass.newPwdOne,
          newPwdTwo: this.editPass.newPwdTwo,
        }).then(res => {
          console.log(res)
          if (res.code == '200') {
             
             this.$message({
                message: res.msg,
                type: "success",
              });
            this.editPassDialog = false
            this.loginOut()
          } else {
            // this.$message.error(res.msg);
          }
        })
      }
    },
    mounted() {
      this.tabcur(this.tabcurid);
      this.users()
      bus.$on("message", (msg) => {
        this.msg = msg
      });
      // 跑马灯内容
      // this.getshow()
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .demo-ruleForm>div {
    width: 512px;
  }
</style>